<template>
  <el-table :data="gridData" :border="false" class="risk-trends-table">
    <el-table-column prop="name" label="公司名称" width="240">
    </el-table-column>
    <el-table-column prop="type" label="风险类型" width="140">
    </el-table-column>
    <el-table-column prop="grade" label="风险等级" width="90" align="center">
      <template slot-scope="scope">
        <div v-if="scope.row.grade == 1" class="grade grade-1">低</div>
        <div v-if="scope.row.grade == 2" class="grade grade-2">中</div>
        <div v-if="scope.row.grade == 3" class="grade grade-3">高</div>
      </template>
    </el-table-column>
    <el-table-column prop="des" label="风险详情"> </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "FinancialTableModal",
  data() {
    return {
      gridData: [
        {
          name: "天津市石化管件有限公司",
          type: "财务风险",
          grade: "2",
          des: "不满意的原因应该有很多，可以列举不满意的原因应该有很多，可以列举不满意的原因应该有很多",
        },
        {
          name: "北京微超科技有限公司",
          type: "财务风险",
          grade: "1",
          des: "不满意的原因应该有很多，可以列举",
        },
        {
          name: "北京好扑信息科技有限公司",
          type: "重大事项风险",
          grade: "3",
          des: "不满意的原因应该有很多，可以列举不满意的原因应该有很多，可以列举不满意的原因应该有很多",
        },
        {
          name: "北京菜鸟物流有限公司",
          type: "财务风险",
          grade: "2",
          des: "不满意的原因应该有很多，可以列举",
        },
        {
          name: "北京药联健康科技有限公司",
          type: "财务风险",
          grade: "1",
          des: "不满意的原因应该有很多，可以列举",
        },
        {
          name: "高诚美恒公司",
          type: "参股公司舆情风险",
          grade: "2",
          des: "不满意的原因应该有很多，可以列举",
        },
        {
          name: "北京好扑信息科技有限公司",
          type: "财务风险",
          grade: "3",
          des: "不满意的原因应该有很多，可以列举不满意的原因应该有很多，可以列举不满意的原因应该有很多",
        },
        {
          name: "亚商桥(北京)咨询有限公司",
          type: "财务风险",
          grade: "3",
          des: "不满意的原因应该有很多，可以列举不满意的原因应该有很多，可以列举不满意的原因应该有很多",
        },
        {
          name: "北京茶驿茶艺有限公司",
          type: "重大事项风险",
          grade: "1",
          des: "不满意的原因应该有很多，可以列举",
        },
        {
          name: "北京上泽林企业咨询有限公司",
          type: "重大事项风险",
          grade: "1",
          des: "不满意的原因应该有很多，可以列举",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.risk-trends-table {
  &::v-deep.el-table {
    th > .cell {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #58b2ff;
    }
    .grade {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      &-1 {
        background: #7c8a9f;
      }
      &-2 {
        background: #efa451;
      }
      &-3 {
        background: #76384f;
      }
    }
  }
}
</style>
